<template>
  <div class="main-loginView">
    <iframe src="/particle.html"></iframe>
    <!--    <header>-->
    <!--      <div class="head">-->
    <!--        <div class="wrapper">-->
    <!--          <div class="logo"></div>-->
    <!--          <div class="menu">-->
    <!--&lt;!&ndash;            <a href="" id="menu1">华晨宝马</a>&ndash;&gt;-->

    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </header>-->
    <div class="banner_area" id="banner_list">
      <div class="main_box">
        <div class="main_cont">
          <div class="wrapper">
            <dl class="xl_info clearfix">
              <dt class="hide">登录</dt>
              <dd><input style="background-color: transparent;color: black" type="text" class="srh" v-model="name"></dd>
              <dd><input style="background-color: transparent;color: black" type="password" class="srh" v-model="pwd">
              </dd>
              <dd><input style="border:solid 1px #b7b7b7;color: black" class="button white2 radius4 dl" type="button"
                         @click="handleLogin"
                         value="登录"/></dd>
              <dd><input class="button blue radius4 shenqing" type="button" value="立即注册"/><input
                  class="button blue radius4 lj" type="button" value="咨询了解"/></dd>
            </dl>


          </div>
          <div class="bg"></div>
        </div>

      </div>
      <div class="banner_box banner_ui on on_delay">
        <div class="banner_cont">
          <div class="area">
            <p class="ban1_anim_txt">精心打造，简而未减</p>
            <div class="ban1_anim_bg"></div>
          </div>
        </div>
      </div>
      <div class="banner_box banner_logo">
        <div class="banner_cont">
          <div class="area">
            <p class="ban2_anim_txt">动态皮肤，随心随身</p>
            <div class="ban2_anim_bg_logo"></div>
            <div class="ban2_anim_bg_line"></div>
            <div class="ban2_icon_1"><span></span></div>
            <div class="ban2_icon_2"><span class="s1"></span><span class="s2"></span></div>
            <div class="ban2_icon_3"><span></span></div>
          </div>
        </div>
      </div>
      <div class="banner_box banner_lighting">
        <div class="banner_cont">
          <div class="area">
            <div class="ban3_act_bg"></div>
            <div class="ban3_mask"></div>
            <p class="ban3_anim_txt png">极速体验，快如闪电</p>
            <div class="ban3_anim_bg_lightning"></div>
            <div class="ban3_anim_bg_boom"></div>
            <div class="ban3_anim_bg_boom_icon_l"></div>
            <div class="ban3_anim_bg_boom_icon_r"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserInfo, setCookies, getCookies} from "@/assets/js/api";

let _bannerList
let _status
let _listLength
let _gbTime
let _time
let _noclick

export default {
  name: "loginView",
  components: {},
  data() {
    return {
      name: '',
      pwd: ''
    };
  },
  mounted() {
    _bannerList = $('#banner_list .banner_box')
    _status = $('#status span')
    _listLength = _bannerList.length - 1
    _gbTime = 1
    _time = null
    _noclick = false


    let n = new Image();
    n.onload = () => {
      this.loadDelay();
    }
    n.src = "/css/images/bg1_1.png"
    /*Click Event*/
    _status.bind('click', () => {
      let _index = $(this).index();
      if ($(this).hasClass('on') || _noclick == true) {
        return false;
      } else {
        clearInterval(_time);
        this.fnFocusAct(_index);
      }
    })

    this.cookieLogin()
  },
  methods: {
    loadDelay() {
      _time = setInterval(() => {
        this.fnTime()
      }, 5000);
      _bannerList.eq(0).removeClass('on_delay');
    },
    fnFocusAct(actNum) {
      clearInterval(_time);
      _noclick = true;
      let _toHide = $('#banner_list').find('.on')
      let _statusAct = _status.eq(actNum)
      let _toAct = _bannerList.eq(actNum)
      _statusAct.siblings().removeClass('on');
      _statusAct.addClass('on');

      _toAct.addClass('on2');
      _toHide.fadeTo(600, 0, function () {
        _toHide.removeClass('on');
        _toAct.removeClass('on2');
        _toAct.siblings().css('opacity', '1');
        _toAct.addClass('on');
        _noclick = false;
      })
      _gbTime = actNum;
      if (_gbTime == _listLength) {
        _gbTime = 0;
      } else {
        _gbTime++;
      }
      _time = setInterval(() => {
        this.fnTime()
      }, 5000)
    },
    fnTime() {
      this.fnFocusAct(_gbTime);
    },
    cookieLogin() {
      let {name, pwd} = getCookies()
      if (!name) return
      getUserInfo(name).then(res => {
        if (res.code === 400) {
          let pwdFromDB = res.rows[0].pwd
          if (pwd === pwdFromDB) {
            setCookies(name, pwd)
            this.$router.push({path: '/home'})
          }
        }

      })
    },
    handleLogin() {
      if (!this.name || !this.pwd) {
        this.$message.warning('用户名或者密码不能为空')
        return
      }
      
      this.$router.push({path: '/home'})

      getUserInfo(this.name).then(res => {
        if (res.code === 400) {
          let pwd = res.rows[0].pwd
          if (pwd === this.pwd) {
            setCookies(this.name, this.pwd)
            this.$router.push({path: '/home'})
          } else {
            this.$message.warning('用户名或者密码错误空')
          }
        } else {
          this.$message.warning('用户名或者密码错误空')
        }

      })
    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {
    if (_time) {
      clearInterval(_time)
    }
  },
}
</script>

<style scoped>
.main-loginView {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.white2 {
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
